const webpack = require('webpack'),  
  htmlPWebpacklugin = require('html-webpack-plugin'),
  devServer = require('webpack-dev-server'),
  miniCssExtractPlugin = require('mini-css-extract-plugin'),
  // copyWebpackPlugin = require('copy-webpack-plugin')
  VueLoaderPlugin = require('vue-loader/lib/plugin')


module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',
  entry: {
    index: './src/index.js'
  },
  output: {
    path: __dirname + '/dist', //打包好的文件 输出的文件到哪个目录
    filename: './js/[name]-[hash:8].js',//指定 输出的文件的名称
    publicPath: '/'
  },
  plugins: [   //配置插件的节点 
    new htmlPWebpacklugin({
      template: './src/index.html',//html 模板文件 将来hi根据指定的页面路径 去生成内存中的页面
      // chunks : ['index'],//引入的js对应的chuank 
      //excludeChunks: ['demo'],//排除对应的chuank
      inject: 'body',//引入的位置
      filename: 'index.html',//指定生成的页面的名称
      title: '首页'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new miniCssExtractPlugin({
      filename: 'css/[name]-[hash:8].css'
    }),
    // new copyWebpackPlugin([{
    //   from: __dirname +'/src/assets',
    //   to:'./assets/'//dist
    // }])
    new VueLoaderPlugin(),
    
  ],
  devServer: {// 配置 dev-server命令参数 第二种形式 相对麻烦
    contentBase: "./dist",
    inline: true,//实时刷新
    overlay: {
      errors: true//浏览器显示错误
    },
    port: 3000,
    hot: true,//启用热更新
  },
  module: { //这个节点用于配置 所有的第三方模块 加载器
    rules: [//所有第三方模块 匹配规则
      {
        test: /\.js$/,        
        loader: 'babel-loader',         
      },
      {
        test: /\.vue$/,
        loader:'vue-loader'
      },
      {
        test: /\.css$/,
        use: [miniCssExtractPlugin.loader,'style-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.scss$/,
        use: [miniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'postcss-loader']
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,// 转base64
              name: '[name].[ext]',//ext 代表文件原本后缀
              outputPath: 'img/'//导出的位置
            }
          }
        ]
      },
      {
        test: /\.(htm|html)$/i,
        loader: 'html-withimg-loader'
      }
    ]
  }
}
